<template>
	<view class="fittingsearch">
		<SearchBar :keyword="prodKeyword" @search="onSearch" placeholder="搜索配件" />
		<view class="fittingsearch__bar">
			<input :value="partsKeyword" placeholder="搜索配件" @change="partKeyWordChange" />
			<button @click="onlyRO = false" v-if="onlyRO" class="cu-btn primary">只查滤芯</button>
			<button @click="onlyRO = true" v-else class="cu-btn">只查滤芯</button>
		</view>
		<view class="fittingsearch__items">
			<block v-for="(listItem, index) in accessorieList" :key="index">
				<FittingItem v-for="(partItem) in listItem" :key="partItem.ProductId" :partNumber="partItem.Name" :partName="partItem.ProductNumber"
				 :partPrice="partItem.Price" :shortLabel="partItem.ShortLabel" :imageSrc="loadBase64Img(partItem.Image)" />
			</block>
		</view>
		<view class="fittingsearch__loadmore" @click="loadMorePart" v-if="displayLoadMore">
			<text>加载更多</text>
		</view>
	</view>
</template>
<script>
	import SearchBar from '../../components/SearchBar';
	import FittingItem from '../../components/FittingItem';

	export default {
		components: {
			SearchBar,
			FittingItem
		},
		data() {
			return {
				pageNum: 1,
				accessorieList: [],
				prodKeyword: "",
				partsKeyword: "",
				onlyRO: false,
				displayLoadMore: true,
			}
		},
		onLoad(e) {
			//debugger;
			uni.showLoading({
				title: "加载中..."
			})
			console.log(e);
			if (e.hasOwnProperty("prodNum")) {
				this.prodKeyword = e.prodNum;
			}
			this.GetAccessorieList();
		},
		methods: {
			async GetAccessorieList() {
				let uPhone = this.UserInfo.mobile;
				let token = this.UserInfo.RetId;
				let pageIndex = this.pageNum -1
				//分页页码接口从0开始
				let result = await this.productlistservice.AccessoriesFindAsync(uPhone,
					this.prodKeyword, this.partsKeyword,
					pageIndex, this.PageSize, 
					this.onlyRO, token);
				if (result.RetBool && result.RetObject) {
					let accessoriePage = JSON.parse(result.RetObject);
					if (accessoriePage && accessoriePage.length > 0) {
						this.accessorieList.push(accessoriePage);
							this.displayLoadMore = true;
					} else {
						this.displayLoadMore = false;
					}
					console.log(accessoriePage);
				} else {
					this.displayLoadMore = false;
				}
				uni.hideLoading();
			},
			loadMorePart(e) {
				uni.showLoading({
					title: "加载中..."
				})
				this.pageNum += 1;
				this.GetAccessorieList();
			},
			loadBase64Img(base64Img) {
				return `data:image/jpeg;base64,${base64Img}`;
			},
			partKeyWordChange(e){
				this.partsKeyword = e.detail.value;
			},
			onSearch(keyword) {
				//debugger;
				uni.showLoading({
					title: "加载中..."
				})
				this.prodKeyword = keyword;
				this.pageNum = 1;
				this.accessorieList = [];
				this.GetAccessorieList();
				//console.log('search fitting:' + keyword);
			}
		}
	}
</script>
<style lang="scss">
	@import './index.scss';
</style>
